<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验5：图片的DOM操作</title>
		<style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			fieldset p{width: 225px;word-wrap:break-word;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
		    h1{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>谭君容189000829</h1>
		<div id="cont_left">
			<ul><img src="imgs/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li id="dianji"><img src="imgs/doc.gif">获取原始图片路径</li>
					<li onclick="getLike()"><img src="imgs/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="imgs/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li><img src="imgs/doc.gif">创建图片</li>
					<li><img src="imgs/doc.gif">克隆图片</li>
					<li><img src="imgs/doc.gif">改变图片</li>
					<li><img src="imgs/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul><img src="imgs/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li><img src="imgs/doc.gif">为原始图片加上行间样式</li>
					<li><img src="imgs/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>
		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="imgs/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" />葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//菜单收缩与扩展
			function show(item) {
				let currentMenu = document.getElementById(item);
				let currentStatus = currentMenu.style.display;
				currentMenu.style.display = currentStatus == "" ? "none" : "";
			}
			
			//显示图片的路径
			let dianji=document.getElementById("dianji");//获取点击
			let pitureURL=document.getElementById('fruit').src;//找到图片的原始路径
			let msg1=document.getElementById('msg1');//获取指定位置
			//用监听给需要点击的标签添加点击事件
			dianji.addEventListener("click",function(){
				msg1.innerHTML=pitureURL;//让找到的路径显示到指定位置
			})

			//获取最喜欢的水果
			function getLike(){
				let enjoys=document.getElementsByName('enjoy');//获取所有选项
				let msg2=document.getElementById("msg2");//获取指定位置
				let arr=[];
				//通过循环找到被选中的选项
				for( i in enjoys){
					if(enjoys[i].checked){
						arr.push(enjoys[i].value)//把选中项添加到数组里面
					}
				}
				msg2.innerHTML=arr//输出数组
			}

			//创建图片3
			//找到menu2下面的第一个li标签
			let menu2_li1=document.querySelector("#menu2>li:nth-of-type(1)");
			let msg3=document.getElementById("msg3");//获取需要放入的位置
			let createimg=document.createElement("img");//添加一个img节点
			createimg.src="imgs/grape.jpg";//给添加的节点添加内容
			//利用监听给menu2_li1添加点击事件
			menu2_li1.addEventListener("click",function(){
				msg3.appendChild(createimg);//在节点末尾添加新创建的图片
			})

			//克隆图片
			//获取menu2下面的第二个li标签
			let menu2_li2=document.querySelector("#menu2>li:nth-of-type(2)");
			let msg4=document.getElementById("msg4");//获取需要放入的位置
			let cl_fruit=document.getElementById("fruit");//找到被克隆的图片
			let clpic=cl_fruit.cloneNode(true);//设置为true
			menu2_li2.addEventListener("click",function(){
				msg4.appendChild(clpic);
			})

			//改变图片
			//获取menu2下面的第三个li标签
			let menu2_li3=document.querySelector("#menu2>li:nth-of-type(3)");
			let change_fruit=document.getElementById("fruit");//找到被改变的图片
			menu2_li3.addEventListener("click",function(){
				change_fruit.src="imgs/grape.jpg"
			})

			//删除图片
			//获取menu2下面的第四个li标签
			let menu2_li4=document.querySelector("#menu2>li:nth-of-type(4)");
			let delete_fruit=document.getElementById("fruit");//找到被删除的图片
			menu2_li4.addEventListener("click",function(){
				//通过寻找目标节点的父节点后 移除需要移除的节点
				delete_fruit.parentNode.removeChild(delete_fruit)
			})

			//为原始图片加上行间样式
			//获取menu3下面的第1个li标签
			let menu3_li1=document.querySelector("#menu3>li:nth-of-type(1)");
			let change_style=document.getElementById("fruit");
			menu3_li1.addEventListener("click",function(){
				//change_style.style.display="none";
				change_style.style.width="100px";
			})

			//为所有的fieldset加上内部样式
			//获取menu3下面的第2个li标签
			let menu3_li2=document.querySelector("#menu3>li:nth-of-type(2)");
			let allfieldset=document.querySelectorAll("fieldset");//获取所有的fieldset
			menu3_li2.addEventListener("click",function(){
				//循环找到所有的fieldset
				for(let i=0;i<allfieldset.length;i++)
				{
					//引用内部样式
					allfieldset[i].className="newcss1";
				}
			})
		</script>
	</body>
</html>
